<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>DataGrid Complex Toolbar - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="/easyui/demo.css">
    <script type="text/javascript" src="/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
</head>
<body>

<table id="dg" class="easyui-datagrid" style="width:700px;height:250px"
       data-options="rownumbers:true,singleSelect:true,url:'datagrid_data1.json',method:'get'">
</table>


<div id="win"></div>

<input id="circleId" hidden="hidden" th:value="${circleModel.circleId}">

</body>

<script>
    
    function opt_show_user_circles(index) {
        $('#dg').datagrid('selectRow', index);
        var row = $('#dg').datagrid('getSelected');
        var url = "/circle/user/"+row.userId+"/circles.html";
        var title = "["+row.userName+"]用户关联的工作圈列表";
        var content = '<iframe src="' + url + '" width="100%" height="99%" frameborder="0" scrolling="no"></iframe>';
        $('#win').window({
            title: title,
            content: content,
            width:600,
            height:400,
            modal:true
        });
    }

    function formatDateTime(inputTime) {
        var date = new Date(inputTime);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        var d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        var h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        var minute = date.getMinutes();
        var second = date.getSeconds();
        minute = minute < 10 ? ('0' + minute) : minute;
        second = second < 10 ? ('0' + second) : second;
        return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
    };

    var circleId = $("#circleId").val();

    $('#dg').datagrid({
        url:'/circle/'+circleId+'/users',
        pagination : true,//分页控件
        pageList: [10, 20, 30, 40, 50],
        fit: true,   //自适应大小
        border:false,
        nowrap: true,//数据长度超出列宽时将会自动截取。
        rownumbers:true,//行号
        fitColumns:true,//自动使列适应表格宽度以防止出现水平滚动。

        columns:[[
            {field:'userId',title:'成员ID',width:100},
            {field:'openId',title:'成员微信openId',width:160},
            {field:'userName',title:'姓名',width:100},
            {field:'createTime',title:'注册时间',width:120,formatter: function(value,row,index){
                return formatDateTime(value);
            }},
            {field:'lastLoginTime',title:'加入工作圈时间',width:120,formatter: function(value,row,index){
                return formatDateTime(value);
            }},
            {field:'updateTime',title:'最后更新时间',width:120,formatter: function(value,row,index){
                return formatDateTime(value);
            }},
            {field:'id',title:'操作',width:100,formatter: function(value,row,index){
                return '<a href="#" onclick="opt_show_user_circles('+index+')">查看关联的工作圈</a>';
            }}
        ]]
//        ,
//        onDblClickRow:function(index,row){
//            var url = "/circle/user/"+row.userId+"/circles.html";
//            var title = "["+row.userName+"]用户关联的工作圈列表";
//            var content = '<iframe src="' + url + '" width="100%" height="99%" frameborder="0" scrolling="no"></iframe>';
//            $('#win').window({
//                title: title,
//                content: content,
//                width:600,
//                height:400,
//                modal:true
//            });
//        }
    });


    $("#btn_showCircle").on('click', function () {
        alert("ok");
    })



</script>
</html>